<template>
  <x-drawer :visible.sync="commentVisible" title="您对本次购物服务满意吗？" cancel @cancel="handleCancel">
    <view class="p-comment-drawer">
      <view class="comment-logo-list">
        <view class="item" v-for="(item, index) in list" :key="index" @click="changeCheckedIndex(index)">
          <view class="img">
            <x-image :src="formatOss(checkedIndex === index ? item.activeUrl :item.url)" />
          </view>
          <view class="text">
            {{ item.label }}
          </view>
        </view>
      </view>
      <view class="_button safe-area">
        <x-button :disabled="checkedIndex < 0" class="btn" size="large" round type="primary" @click="handleConfirm">确认</x-button>
      </view>
      <view v-if="insetBottom" class="safe-area-inset-bottom" />
    </view>
  </x-drawer>
</template>

<script>
import XDrawer from '@/components/x-drawer';
import XImage from '@/components/x-image';
import XButton from '@/components/x-button';

export default {
  name: 'PComment',
  components: {
    XButton,
    XDrawer,
    XImage
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    detail: {
      type: Object,
      default: () => null
    },
    checked: {
      type: Number,
      default: -1
    }
  },
  data() {
    return {
      score: '',
      commentVisible: this.visible,
      checkedIndex: this.checked,
      list: [
        {
          url: '/assets/images/comment-1.png',
          activeUrl: '/assets/images/comment-1-c.png',
          label: '很不满',
          value: 0
        },
        {
          url: '/assets/images/comment-2.png',
          activeUrl: '/assets/images/comment-2-c.png',
          label: '不满',
          value: 1
        },
        {
          url: '/assets/images/comment-3.png',
          activeUrl: '/assets/images/comment-3-c.png',
          label: '一般',
          value: 2
        },
        {
          url: '/assets/images/comment-4.png',
          activeUrl: '/assets/images/comment-4-c.png',
          label: '满意',
          value: 3
        },
        {
          url: '/assets/images/comment-5.png',
          activeUrl: '/assets/images/comment-5-c.png',
          label: '很满意',
          value: 4
        }
      ]
    };
  },
  computed: {
  },
  watch: {
    visible(val) {
      this.commentVisible = val;
    }
  },
  created() {
  },
  methods: {
    // 格式化图片
    formatOss(url) {
      return this.$tools.formatOss(url);
    },
    changeCheckedIndex(val) {
      this.checkedIndex = val;
    },
    handleCancel() {
      this.$emit('update:visible', false);
    },
    handleConfirm() {
      this.$emit('confirm', this.checkedIndex);
      this.$emit('update:visible', false);
    }
  }
};
</script>

<style lang="scss" scoped>
  .p-comment-drawer{
    .comment-logo-list {
      display: flex;
      justify-content: space-between;
      padding: 80px;
      .item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 28px;
        color: #999999;
        .img {
          width: 50px;
          height: 50px;
          margin-bottom: 25px;
        }
      }
    }
    ._button{
      margin-bottom: 82px;
      position: relative;
      padding: 0 24px;
    }
    button {
      background: #FF6014!important;
    }
    .is-disabled:active {
      background: #FFBC9C!important;
    }
    .x-button.is-disabled, .x-button.is-disabled:active {
      background: #FFBC9C !important;
      background-color: #FFBC9C !important;
      color: #FFFFFF !important;
    }
  }
</style>
